<template>
  <!-- 表单部分 -->
  <el-form inline>
    <el-form-item label="用户名：">
      <el-input v-model="queryForm.name" clearable />
    </el-form-item>
    <el-form-item label="账号：">
      <el-input v-model="queryForm.account" clearable />
    </el-form-item>
    <el-form-item label="类型：">
      <el-select v-model="queryForm.type" placeholder="Select" style="width: 240px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
          :disabled="item.disabled" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getUserPage">
        <el-icon>
          <Search />
        </el-icon>搜索
      </el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addUser">+新增用户</el-button>
      <el-button type="danger" @click="deleBatch">批量删除</el-button>
    </el-form-item>
  </el-form>

  <!-- 表格展示 -->
  <el-table ref="tableRef" v-loading="loading" :data="userList" style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="100" />
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="account" label="账号" />
    <el-table-column prop="phone" label="电话" />
    <el-table-column prop="sex" label="性别" />
    <el-table-column label="类型">
      <template #default="scope">
        <span>
          {{ scope.row.type == 0 ? '管理员' : scope.row.type == 1 ? '用户' : '商户' }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="balance" label="余额" />
    <el-table-column label="状态">
      <template #default="{ row }">
        <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
          @change="userByStatus(row.status, row.id)" />
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column prop="updateTime" label="更新时间" />
    <el-table-column label="操作" width="200">
      <template #default="{ row }">
        <el-button type="primary" @click="editUser(row)" :disabled="row.id === 1">
          <el-icon>
            <Edit />
          </el-icon>
        </el-button>
        <el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="deleUser(row.id)">
          <template #reference>
            <el-button type="danger" :disabled="row.id === 1">
              <el-icon>
                <Delete />
              </el-icon>
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
    <template #empty>
      <el-empty description="没有数据"></el-empty>
    </template>
  </el-table>

  <!-- 分页 -->
  <el-pagination v-model:current-page="queryForm.page" v-model:page-size="queryForm.pageSize"
    :page-sizes="[2, 5, 10, 20]" :background="true" layout="jumper, total, sizes, prev, pager, next" :total="total"
    @size-change="getUserPage" @current-change="getUserPage" />

  <!-- 子分类编辑对话框 -->
  <UserEdit ref="dialog" @success="onSuccess" />
</template>

<script setup>
// 引入依赖
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  getUserPageAPI,
  deleUserAPI,
  userByStatusAPI,
} from "@/apis/user.js";
import UserEdit from "./components/UserEdit.vue";

// 定义响应式数据
const queryForm = ref({
  page: 1,
  pageSize: 10,
  name: "",
  account: "",
  type: "",
});

const userList = ref([]);
const loading = ref(false);
const total = ref(0);
const dialog = ref(null);
const tableRef = ref(null);

const options = [
  {
    value: '0',
    label: '管理员',
  },
  {
    value: '1',
    label: '用户',
  },
]

// 定义方法
const getUserPage = async () => {
  loading.value = true;
  const res = await getUserPageAPI(queryForm.value);
  userList.value = res.data.records;
  total.value = res.data.total;
  loading.value = false;
};

const addUser = () => {
  dialog.value.open({});
};

const deleUser = async (id) => {
  const res = await deleUserAPI(id);
  if (res.code === 1) {
    ElMessage.success("删除成功");
    getUserPage();
  }
};

const editUser = (row) => {
  dialog.value.open(row);
};

const deleBatch = () => {
  const selectedRows = tableRef.value.getSelectionRows();
  if (selectedRows.length === 0) {
    ElMessage.warning("没有选中的子分类");
  } else {
    const selectedIds = selectedRows.map((row) => row.id).join(",");
    deleUser(selectedIds);
  }
};

const userByStatus = async (status, id) => {
  const res = await userByStatusAPI(status, id);
  if (res.code === 1) {
    ElMessage.success("修改状态成功");
    getUserPage();
  }
};

const onSuccess = async (isEdit) => {
  if (!isEdit) {
    const res = await getUserPageAPI(queryForm.value);
    const totalPages = Math.ceil(res.data.total / queryForm.value.pageSize);
    queryForm.value.page = totalPages;
  }
  getUserPage();
};
// 生命周期钩子
onMounted(() => {
  getUserPage();
});
</script>